<template>
	<div>
		<Header></Header>
		<div class="content">
			<el-row v-loading="loading">
				<h2 class="title">{{$t('persons.faceManage')}}</h2>
				<el-row class="search-form-row">
					<el-form :inline="true" class="demo-form-inline">
						<el-form-item :label="$t('persons.company')">
							<el-select v-model="companyId" @change="query(1)">
								<el-option v-for="company in companyList" :key="company.id" :value="company.id" :label="company.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('persons.characterType')">
							<el-select v-model="type" @change="query(1)">
								<el-option :label="$t('persons.whole')" value="">
								</el-option>
								<el-option v-for="type in personTypes" :key="type.value" :label="type.label" :value="type.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('persons.name1')">
							<el-input type="text" v-model="searchValue" @keyup.enter.native="query(1)"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="query(1)">{{$t('standard.query')}}</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="showAddDialog">{{$t('persons.newCharacters')}}</el-button>
						</el-form-item>
					</el-form>
				</el-row>
				<el-row>
					<el-table :data="personData" style="width: 100%">
						<el-table-column align="left" prop="name" :label="$t('persons.name2')" width="300px"></el-table-column>
						<el-table-column align="left" prop="type" :label="$t('persons.type2')" width="100px" :formatter="getTypeName"></el-table-column>
						<el-table-column align="left" prop="createTime" :label="$t('persons.addTime')">
							<template slot-scope="scope">
								{{ scope.row.createTime | date('YYYY-MM-DD HH:mm:ss') }}
							</template>
						</el-table-column>
						<el-table-column align="left" prop="updateTime" :label="$t('persons.updateTime')">
							<template slot-scope="scope">
								{{ scope.row.updateTime | date('YYYY-MM-DD HH:mm:ss') }}
							</template>
						</el-table-column>
						<el-table-column align="center" :label="$t('standard.operation')" width="500px">
							<template slot-scope="scope">
								<el-button type="success" @click="showInfoHtml(scope.row)">{{$t('standard.details')}}</el-button>
								<el-button style="background-color: #ffcc65;border-color: #ffcc65;color: #fff;" @click="showModifyDialog(scope.row)">
									{{$t('standard.modify')}}
								</el-button>
								<el-button type="danger" @click="deletePerson(scope.row.id)">{{$t('standard.delete')}}</el-button>
								<el-button style="background-color: #34cccc;border-color: #34cccc;color: #fff;" @click="showAddImages(scope.row)">
									{{$t('persons.maintainAtlas')}}
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-row>
				<el-row style="text-align: right;margin-top: 10px">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.currentPage"
					 :page-sizes="[10, 20, 50]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalNum">
					</el-pagination>
				</el-row>

				<el-dialog :title="formTitle" :visible.sync="addFormVisible" :show-close="false">
					<el-row>
						<el-form :model="addForm" :rules="addRules" ref="addForm" label-width="120px" style="text-align: left">
							<el-form-item :label="$t('persons.facePhotos')" prop="headImage">
								<el-upload class="avatar-uploader" :action="uploadPath" accept="image/*" :on-change="handleUploadChange"
								 :before-upload="beforeUpload" :show-file-list="false" :on-success="afterUpload" :on-error="errorUpload">
									<img v-if="imageUrl" :src="imageUrl" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon" :title="$t('persons.chooseHead')"></i>
								</el-upload>
							</el-form-item>
							<el-form-item :label="$t('persons.characterName')" prop="name">
								<el-input v-model="addForm.name" auto-complete="off" style="width: 217px;"></el-input>
							</el-form-item>
							<el-form-item :label="$t('persons.characterType')" prop="type">
								<el-select v-model="addForm.type" filterable :placeholder="$t('persons.choose')">
									<el-option v-for="item in personTypes" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item :label="$t('persons.IDCard')" prop="identityCard">
								<el-input v-model="addForm.identityCard" auto-complete="off" style="width: 217px;" maxlength="18"></el-input>
							</el-form-item>
							<el-form-item :label="$t('persons.birthday')" prop="birthday">
								<el-input v-model="addForm.birthday" auto-complete="off" style="width: 217px;" placeholder="格式:2008/01/01"></el-input>
							</el-form-item>
							<el-form-item :label="$t('persons.nation')" prop="nation">
								<el-input v-model="addForm.nation" auto-complete="off" style="width: 217px;"></el-input>
							</el-form-item>
							<el-form-item :label="$t('persons.characterDesc')" prop="personageResume">
								<el-input type="textarea" v-model="addForm.personageResume" auto-complete="off" style="width: 90%;" :autosize="{ minRows: 2, maxRows: 4}"
								 maxlength="200"></el-input>
							</el-form-item>
						</el-form>
					</el-row>
					<span slot="footer" class="dialog-footer">
						<el-button @click="addFormVisible = false">{{$t('standard.cancel')}}</el-button>
						<el-button type="primary" @click="save()" :loading="saving">{{$t('standard.confirm')}}</el-button>
					</span>
				</el-dialog>

				<el-dialog :title="imageTitle" :visible.sync="imageVisible" width="1000px" :show-close="false">
					<el-row class="search-form-row">
						<el-form :inline="true" class="demo-form-inline">
							<el-form-item>
								<el-upload class="upload-demo" :action="uploadPath" accept="image/*" :on-change="handleUploadChange" :file-list="fileList"
								 :before-upload="beforeUpload" :show-file-list="false" :on-success="successUpload" :multiple="true" :on-error="errorUpload">
									<el-button type="primary">{{$t('persons.addPictures')}}</el-button>
								</el-upload>
							</el-form-item>
						</el-form>
					</el-row>
					<el-row style="text-align: left">
						<h3>{{$t('persons.characterCover')}}</h3>
						<div class="personLi flex">
							<img class="img" :src="currentPerson.headImage" @click="showPic(currentPerson.headImage)">
						</div>
					</el-row>
					<el-row style="text-align: left" v-show="showImage">
						<h3>{{$t('persons.characterGallery')}}</h3>
						<ul style="height: auto;padding: 0;margin: 0 0 10px 25px;">
						</ul>
						<div v-for="item in imagesData" class="personLi">
							<a>
								<div class="img">
									<img :src="item.path" alt="img" @click="showPic(item.path)" :style="item.style">
								</div>
								<div class="info" style="line-height: 100px">
									<a class="el-icon-setting" :id="item.id" :title="$t('persons.setCover')" style="margin-top:145px;font-size: 20px;"
									 @click="SetHeadImage(item.id,item.path)"></a>
									&nbsp;&nbsp;&nbsp;
									<a class="el-icon-delete" :id="item.id" style="color: rgba(255, 0, 0, 0.6);font-size: 20px;" @click="delImage(item.id, item.faceId, item.politicallyPersonsId)"
									 :title="$t('standard.delete')"></a>
								</div>
							</a>
						</div>
					</el-row>
					<div slot="footer" class="dialog-footer">
						<el-button @click="imageVisible = false">{{$t('standard.close')}}</el-button>
					</div>
				</el-dialog>

				<el-dialog :title="formTitle" :visible.sync="infoVisible" :show-close="false">
					<el-row>
						<el-form label-width="120px" style="text-align: left">
							<el-form-item :label="$t('persons.facePhotos')" prop="headImage">
								<img v-if="imageUrlInfo" :src="imageUrlInfo" class="avatar" :style="infoStyle">
							</el-form-item>
							<el-form-item :label="$t('persons.characterName')" prop="name">
								<el-input v-model="infoForm.name" auto-complete="off" style="width: 217px;" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item :label="$t('persons.characterType')" prop="type">
								<el-select v-model="infoForm.type" filterable :placeholder="$t('persons.choose')" :disabled="true">
									<el-option :label="$t('persons.whole')" value="">
									</el-option>
									<el-option v-for="item in personTypes" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item :label="$t('persons.birthday')" prop="birthday">
								<el-input v-model="infoForm.birthday" auto-complete="off" style="width: 217px;" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item :label="$t('persons.nation')" prop="nation">
								<el-input v-model="infoForm.nation" auto-complete="off" style="width: 217px;" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item :label="$t('persons.characterDesc')" prop="personageResume">
								<el-input type="textarea" v-model="infoForm.personageResume" auto-complete="off" style="width: 90%;" :autosize="{ minRows: 2, maxRows: 4}"
								 :disabled="true"></el-input>
							</el-form-item>
						</el-form>
					</el-row>
					<span slot="footer" class="dialog-footer">
						<el-button @click="infoVisible = false">{{$t('standard.close')}}</el-button>
					</span>
				</el-dialog>
			</el-row>
		</div>
	</div>
</template>
<script>
	import persons from './persons'

	export default persons;
</script>

<style>
	.content {
		margin: 60px 50px 0 50px;
	}

	.title {
		text-align: left;
	}

	.search-form-row {
		text-align: left;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px !important;
		text-align: center;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}

	.personLi {
		width: 290px;
		height: 290px;
		list-style-type: none;
		display: inline;
		margin: 20px;
		float: left;
		position: relative;
		background: url(../../assets/media_bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 20px;
	}

	.personLi .img img {
		position: absolute;
		min-width: 100%;
		min-height: 100%;
		display: block;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/*object-fit:cover;*/
	}

	.personLi .img {
		overflow: hidden;
		width: 290px;
		height: 290px;
		position: relative;
	}

	.personLi .info {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		-webkit-backface-visibility: hidden;
		/* 隐藏旋转元素的背面*/
		backface-visibility: hidden;
		background: rgba(0, 0, 0, 0.6);
		/*后面这个0.6是指的背景的透明度*/
		opacity: 0;
		-webkit-transition: all 0.35s ease-in-out;
		/*规定提示信息怎样出现ease-in-out以慢速度开始和结束*/
		-moz-transition: all 0.35s ease-in-out;
		transition: all 0.35s ease-in-out;
		border-radius: 8px;
		color: #ffffff;
	}

	.personLi a:hover .info {
		opacity: 1;
		/*有opacity有0变成1*/
	}


	.flex {
		display: flex;
		justify-content: center;
		align-items: Center;
	}

	.img {
		border-radius: 10px;
		max-height: 100%;
		max-width: 100%;
		cursor: pointer;
	}
</style>
